프로젝트 - 개인 공부 프로젝트 1 - Auth 우리가 특정 사이트를 간다고 했을 때 로그인이 된 유저들만 이용할 수 있고, 그런것을 체크해주기 위해서 Auth 기능을 만드는 것이다 현재 우리는 토큰이 서버의 user 정보에 저장되어있고, 쿠키 내에 토큰이 인코드 되어있는 상태인데 서버에서 받은 토큰을 디코드한다 지난 포스트에서 'secretToken'을 넣으면 user id가 나온다고 했었다 그럼 그 user id를 이용해서 그 user... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 로그인 기능 DB에서 요청한 이메일 찾기 DB에서 요청한 이메일이 있다면 비밀번호가 같은지 확인하기 위 코드를 index.js에 작성하고 여기 안에 아래 3가지 코드를 각각 추가하면 된다 DB에서 찾기위해서 우선 유저 모델을 가져온다 그리고 해당하는 유저가 없다면 로그인이 실패했다고 JSON으로 리턴하자 그래서 bcrypt.compare 을 사용할 것이다 그러기 위해서 comparePassword라는 메... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 리액트란? 싶으면 그 파일만 그대로 가져가서 사용하면 된다 또한 Virtual Dom이라는게 있다 예를들어 10개의 리스트가 있다고 하자 리얼돔에서는 한가지의 리스트에서만 업데이트가 일어났다고 해도 전체 리스트를 그리고 업데이트가 되면 버추얼돔이 하나하나를 살펴보면서 이전에 찍어둔 그리고 바뀐부분이 있으면 그 부분만 리얼돔에서 바꿔준다 원래는 리액트 앱을 처음 실행하기 위해선 webpack이나 babe... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 폴더세팅, Router Dom, Axios(CORS, Proxy) 리액트에서는 페이지간 이동을 할 때 React Router Dom을 사용한다 검색한 결과 버전이 달라서 아래 코드처럼 작성하면 된다 App.js 위 코드를 붙여넣고 npm run start를 실행하면 간단한 페이지 이동이 될 것이다 잘 되는 것을 확인했고 이런 방식으로 진행이 된다 이렇게 하고 직접 주소를 바꿔보면 라우트가 제대로 된 것을 확인할 수 있다 지금까지는 로그인이나 로그아웃을 할 ... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 로그아웃 기능 로그아웃 기능을 만들기 위해 로그아웃 라우트를 만들자 기능은 아래와 같이 구현할 것이다 로그아웃 하려는 유저를 데이터베이스에서 찾는다 찾은 유저의 토큰을 지워준다 로그인을 할 때 토큰을 만들어서 저장하고, 쿠키에도 저장하기 때문에 DB에 있는 토큰을 지워주면 Auth에서 권한이 없다고 나올 것이다 index.js에서 라우트를 만들자 findByIdAndUpdate 메소드는 몽고DB의 메소드인... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - React Hooks, 로그인 페이지 클래스 컴포넌트와 펑셔널 컴포넌트가 있다 Class Component 그렇기에 코드가 길고, 복잡하다 그리고 속도가 느리다 Functional Component 그렇기에 코드가 짧고, 간단하다 그리고 속도가 빠르다 그래서 우리가 대체로 클래스 컴포넌트를 많이 사용했었다 그로 인해 펑셔널 컴포넌트에서도 클래스 컴포넌트에서 사용하는 기능들을 그래서 펑셔널 컴포넌트를 이용해서 구현하도록 하겠다 이... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - Concurrently, Antd CSS, Redux 지금 우리가 클라이언트를 키기 위해서 터미널 위치를 클라이언트로 바꿔서 켜주고, 서버를 키기 위해서 또 나와서 켜야하는 번거로움이 있다 설치 위치는 프로젝트 폴더에 다운받는다 클라이언트 폴더에 다운하지 않는다 사용 방법은 package.json 파일에서 script 부분에 추가시켜주는것이다 루트 폴더의 package.json 의 스크립트 부분에 이렇게 추가를 시켜줬다 앞의 이름은 본인이 원하... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 회원가입, 로그아웃, 인증체크 앞에서 만든 로그인 페이지와 많은 부분이 동일하니 코드를 전부 복사해오자 그리고 핸들러도 2개 더 만들어야 한다 나는 이렇게 추가하였다 이렇게 회원가입 페이지를 만들고 페이지로 들어가보면 아래처럼 나오는 것을 볼 수 있다 로그인 만들때 디스패치를 이용해서 한 것과 똑같이 하면된다 user_actions.js에서 추가로 만들면 된다 user_action.js types.js 그리고 리듀서로 가... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - Nodemon 노드몬은 우리가 변경한 부분이 있으면 서버를 껏다가 다시 켰어야 한다 노드몬을 사용하면 우리가 변경한 부분이 즉각적으로 반영이 된다 -dev 는 이제 우리가 개발을 할 때 로컬에서 할 때와 배포를 한 이후의 모드가 있는데 우리는 로컬에서의 모드(development mode) 만 사용을 한다는 의미이다 굳이 안붙여도 큰 의미는 없다 설치를 하게되면 package.json 에서 원래는 위에 있... 프로젝트 - 개인 공부mongodbReactnode.jsReact 프로젝트 1 - 비밀 설정 정보 관리 소스 코드를 git에다가 올리면 다른 사람들이 우리의 코드를 볼 수 있다 이때 우리의 비밀 정보가 같이 올라갈 수 있다 현재 우리의 정보가 있는 부분은 mongoose.connect 에서 id와 password 를 입력한 부분이다 일단 프로젝트 폴더 내에 새로운 config라는 폴더를 만들고 config내에 dev.js라는 파일을 만들자 그 파일에 아래의 코드를 작성하자 개발 환경은 두 가지... 프로젝트 - 개인 공부mongodbReactnode.jsReact 프로젝트 1 - Bcrypt Bcrypt 라는 라이브러리를 이용해서 비밀번호를 암호화 할 것이다 우리가 저번에 포스트맨을 통해서 정보를 전달했는데 암호화가 되어있지 않기때문에 DB를 관리하는 사람이 비밀번호를 볼 수 있다 그렇게 되면 위험하니 암호화를 해서 DB에 저장되도록 만드는 것이다 우선 bcrypt 라이브러리를 다운받자 현재 signup 라우트에서는 바디에서 받아온 정보를 바로 save 하고 있다 그러므로 sav... 프로젝트 - 개인 공부mongodbReactnode.jsReact
프로젝트 1 - Auth 우리가 특정 사이트를 간다고 했을 때 로그인이 된 유저들만 이용할 수 있고, 그런것을 체크해주기 위해서 Auth 기능을 만드는 것이다 현재 우리는 토큰이 서버의 user 정보에 저장되어있고, 쿠키 내에 토큰이 인코드 되어있는 상태인데 서버에서 받은 토큰을 디코드한다 지난 포스트에서 'secretToken'을 넣으면 user id가 나온다고 했었다 그럼 그 user id를 이용해서 그 user... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 로그인 기능 DB에서 요청한 이메일 찾기 DB에서 요청한 이메일이 있다면 비밀번호가 같은지 확인하기 위 코드를 index.js에 작성하고 여기 안에 아래 3가지 코드를 각각 추가하면 된다 DB에서 찾기위해서 우선 유저 모델을 가져온다 그리고 해당하는 유저가 없다면 로그인이 실패했다고 JSON으로 리턴하자 그래서 bcrypt.compare 을 사용할 것이다 그러기 위해서 comparePassword라는 메... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 리액트란? 싶으면 그 파일만 그대로 가져가서 사용하면 된다 또한 Virtual Dom이라는게 있다 예를들어 10개의 리스트가 있다고 하자 리얼돔에서는 한가지의 리스트에서만 업데이트가 일어났다고 해도 전체 리스트를 그리고 업데이트가 되면 버추얼돔이 하나하나를 살펴보면서 이전에 찍어둔 그리고 바뀐부분이 있으면 그 부분만 리얼돔에서 바꿔준다 원래는 리액트 앱을 처음 실행하기 위해선 webpack이나 babe... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 폴더세팅, Router Dom, Axios(CORS, Proxy) 리액트에서는 페이지간 이동을 할 때 React Router Dom을 사용한다 검색한 결과 버전이 달라서 아래 코드처럼 작성하면 된다 App.js 위 코드를 붙여넣고 npm run start를 실행하면 간단한 페이지 이동이 될 것이다 잘 되는 것을 확인했고 이런 방식으로 진행이 된다 이렇게 하고 직접 주소를 바꿔보면 라우트가 제대로 된 것을 확인할 수 있다 지금까지는 로그인이나 로그아웃을 할 ... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 로그아웃 기능 로그아웃 기능을 만들기 위해 로그아웃 라우트를 만들자 기능은 아래와 같이 구현할 것이다 로그아웃 하려는 유저를 데이터베이스에서 찾는다 찾은 유저의 토큰을 지워준다 로그인을 할 때 토큰을 만들어서 저장하고, 쿠키에도 저장하기 때문에 DB에 있는 토큰을 지워주면 Auth에서 권한이 없다고 나올 것이다 index.js에서 라우트를 만들자 findByIdAndUpdate 메소드는 몽고DB의 메소드인... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - React Hooks, 로그인 페이지 클래스 컴포넌트와 펑셔널 컴포넌트가 있다 Class Component 그렇기에 코드가 길고, 복잡하다 그리고 속도가 느리다 Functional Component 그렇기에 코드가 짧고, 간단하다 그리고 속도가 빠르다 그래서 우리가 대체로 클래스 컴포넌트를 많이 사용했었다 그로 인해 펑셔널 컴포넌트에서도 클래스 컴포넌트에서 사용하는 기능들을 그래서 펑셔널 컴포넌트를 이용해서 구현하도록 하겠다 이... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - Concurrently, Antd CSS, Redux 지금 우리가 클라이언트를 키기 위해서 터미널 위치를 클라이언트로 바꿔서 켜주고, 서버를 키기 위해서 또 나와서 켜야하는 번거로움이 있다 설치 위치는 프로젝트 폴더에 다운받는다 클라이언트 폴더에 다운하지 않는다 사용 방법은 package.json 파일에서 script 부분에 추가시켜주는것이다 루트 폴더의 package.json 의 스크립트 부분에 이렇게 추가를 시켜줬다 앞의 이름은 본인이 원하... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - 회원가입, 로그아웃, 인증체크 앞에서 만든 로그인 페이지와 많은 부분이 동일하니 코드를 전부 복사해오자 그리고 핸들러도 2개 더 만들어야 한다 나는 이렇게 추가하였다 이렇게 회원가입 페이지를 만들고 페이지로 들어가보면 아래처럼 나오는 것을 볼 수 있다 로그인 만들때 디스패치를 이용해서 한 것과 똑같이 하면된다 user_actions.js에서 추가로 만들면 된다 user_action.js types.js 그리고 리듀서로 가... Reactmongodb프로젝트 - 개인 공부node.jsReact 프로젝트 1 - Nodemon 노드몬은 우리가 변경한 부분이 있으면 서버를 껏다가 다시 켰어야 한다 노드몬을 사용하면 우리가 변경한 부분이 즉각적으로 반영이 된다 -dev 는 이제 우리가 개발을 할 때 로컬에서 할 때와 배포를 한 이후의 모드가 있는데 우리는 로컬에서의 모드(development mode) 만 사용을 한다는 의미이다 굳이 안붙여도 큰 의미는 없다 설치를 하게되면 package.json 에서 원래는 위에 있... 프로젝트 - 개인 공부mongodbReactnode.jsReact 프로젝트 1 - 비밀 설정 정보 관리 소스 코드를 git에다가 올리면 다른 사람들이 우리의 코드를 볼 수 있다 이때 우리의 비밀 정보가 같이 올라갈 수 있다 현재 우리의 정보가 있는 부분은 mongoose.connect 에서 id와 password 를 입력한 부분이다 일단 프로젝트 폴더 내에 새로운 config라는 폴더를 만들고 config내에 dev.js라는 파일을 만들자 그 파일에 아래의 코드를 작성하자 개발 환경은 두 가지... 프로젝트 - 개인 공부mongodbReactnode.jsReact 프로젝트 1 - Bcrypt Bcrypt 라는 라이브러리를 이용해서 비밀번호를 암호화 할 것이다 우리가 저번에 포스트맨을 통해서 정보를 전달했는데 암호화가 되어있지 않기때문에 DB를 관리하는 사람이 비밀번호를 볼 수 있다 그렇게 되면 위험하니 암호화를 해서 DB에 저장되도록 만드는 것이다 우선 bcrypt 라이브러리를 다운받자 현재 signup 라우트에서는 바디에서 받아온 정보를 바로 save 하고 있다 그러므로 sav... 프로젝트 - 개인 공부mongodbReactnode.jsReact